<template>
  <setting-item-box
    name="名称"
    :alone="true"
  >
    <el-input
      v-model="chartConfig.title"
      type="text"
      size="small"
      maxlength="12"
      minlength="1"
      placeholder="请输入图表名称"
      clearable
      show-word-limit
      @focus="handleFocus"
      @blur="handleBlur"
    />
  </setting-item-box>
</template>

<script>
import SettingItemBox from '@/components/SettingItemBox'
export default {
  components: { SettingItemBox },
  props: {
    chartConfig: {
      type: Object,
      required: true,
      default: () => { }
    },
  },
  data () {
    return {
      valueCatch: ''
    }
  },
  methods: {
    handleFocus () {
      this.valueCatch = this.chartConfig.title
    },
    handleBlur () {
      if (!this.chartConfig.title.length) {
        this.$message.warning('请输入至少一个字符!')
        this.chartConfig.title = this.valueCatch
      }
    }
  }
}
</script>

<style>
</style>